<template>
	<view class="main u-page">
		<u-navbar
			title="企业信息"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="block">
			<view class="block__content">
				<u--form
					labelPosition="left"
					:model="form"
					ref="form"
				>
					<u-form-item
						label="公司logo"
						prop="logo"
						borderBottom
						labelWidth="80"
					>
					<u-avatar
						:src="imgURL + form.logo"
						shape="square"
						@click="selectAvatar"
					></u-avatar>
						<!-- <view v-if="!form.logo" class="upload" @click="upload(1)">
							<u-icon
							size="60rpx"
								name="plus"
							></u-icon>
						</view>
						<image @click="upload(1)" v-else :src="imgURL + form.logo" style="width:200rpx;height:150rpx"></image>
					 -->
					</u-form-item>
					<u-form-item
						label="企业名称"
						prop="ent_name"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.ent_name"
							border="none"
							placeholder="企业名称"
						></u--input>
					</u-form-item>
					<u-form-item
						label="公司电话"
						prop="phone"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.phone"
							border="none"
							placeholder="公司电话"
						></u--input>
					</u-form-item>
					<u-form-item
						label="营业执照"
						prop="license_img"
						borderBottom
						labelWidth="80"
					>
						<view v-if="!form.license_img" class="upload" @click="upload(2)">
							<u-icon
							size="60rpx"
								name="plus"
							></u-icon>
						</view>
						<image v-else @click="upload(2)" :src="imgURL + form.license_img" style="width:200rpx;height:150rpx"></image>
					</u-form-item>
					<u-form-item
						label="公司规模"
						prop="scale"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.scale"
							border="none"
							placeholder="公司规模"
						></u--input>
					</u-form-item>
					<u-form-item
						label="HR负责人"
						prop="hr"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.hr"
							border="none"
							placeholder="HR负责人"
						></u--input>
					</u-form-item>
					<u-form-item
						label="公司领域"
						prop="education"
						borderBottom
						labelWidth="80"
						@click="showPicker(index)"
					>
						<u--input
							v-model="form.fieldname"
							border="none"
							placeholder="职位名称"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="区域"
						prop="areaaddress"
						borderBottom
						labelWidth="80"
					>
						<picker style="width: 100%;" mode="multiSelector" :range="multiArray" :value="multiIndex" @columnchange="multiColumn" @change="multiChange">
							<view :class="areaaddress == null ? 'container-wrap-highest' : ''" style="width: 100%;">
								{{areaaddress || '请选择地区'}}
							</view>
						</picker>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="详细地址"
						prop="address"
						borderBottom
						labelWidth="80"
						 @click="getAuthorizeMap"
					>
						<u--input
							v-model="form.address"
							border="none"
							disabled
							placeholder="详细地址"
						></u--input>
						<u-icon
							slot="right"
							name="map"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="公司福利"
						labelWidth="80"
					>
					</u-form-item>
					<u-form-item borderBottom>
						<u--textarea
							placeholder="公司福利"
							v-model="form.remark"
							count
							:maxlength='800'
						></u--textarea>
					</u-form-item>
					<u-form-item
						label="视频"
						prop="video_url"
					>
					<view style="display:flex; justify-content: right;color:blue;" @click="uploadVideo">选择视频</view>
					</u-form-item>
					<u-form-item borderBottom>
					<video style="width: 650rpx;height: 300rpx;" :src="imgURL + form.video"></video>
					</u-form-item>
					<u-form-item
						label="办公室环境"
						prop="license_img"
						labelWidth="80"
					>
					</u-form-item>
					<u-form-item>
						<view  style="display: flex;width: 100%;flex-wrap: wrap;">
							<view class="upload" @click="upload(3)">
								<u-icon
								size="60rpx"
									name="plus"
								></u-icon>
							</view>
							<block v-if="imgs" v-for="(item,index) in imgs">
								<view style="position: relative;display: flex; flex-wrap: wrap;">
									<view style="width: 40rpx;height: 40rpx;position: absolute;z-index: 1;top: -8rpx; right: 12rpx;">
										<u-icon name="close-circle" color="#ff0000" size="24" @click="delimg(index)"></u-icon>
									</view>
									<image @click="shoImg(index)" style="width: 190rpx;height:190rpx;margin-right: 20rpx;margin-bottom: 10rpx;border-radius: 10rpx;" :src="imgURL + item"></image>
								</view>
							</block>
						</view>
					</u-form-item>
					<u-form-item
						label="公司简介"
						prop="about"
						labelWidth="80"
						:maxlength='800'
					>
					</u-form-item>
					<u-form-item borderBottom>
						<u--textarea
							placeholder="不低于3个字"
							v-model="form.about"
						></u--textarea>
					</u-form-item>
					<u-form-item
						label="福利标签"
						prop="welfare"
						labelWidth="80"
					>
						<view class="OrderBtns">
							<view class="btn" :class="form.welfare.indexOf(item.id) != -1  && 'btnActive'" @click="setWelfare(item)" v-for="(item, index) in WelfareList" :key="index">
								{{ item.name }}
							</view>
						</view>
					</u-form-item>
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
				<u-picker
					:show="showCate"
					:columns="catelist"
					keyName="job_cate_name"
					closeOnClickOverlay
					@cancel="cancel"
					@confirm="PickerChange"
					@close="close"
				></u-picker>
			</view>
		</view>
		<Tabbar :count="2"></Tabbar>
		<u-modal
			title="猫币充值"
			:show="showModal"
			showCancelButton
			asyncClose
			@confirm="Recharge"
			@cancel="() => showModal = false"
		>
			<u--form
				labelPosition="left"
			>
				<u-form-item
					label="充值金额"
					prop="rechargemoney"
					labelWidth="80"
				>
					<u--input
						:disabled="true"
						v-model="rechargemoney"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
		<Map :tude="tude" v-if="showMapEl" @closeMap="closeMap"></Map>
		
		<view v-if="free">
			<ksp-cropper mode="free" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024" :url="baseavatar" @cancel="oncancel" @ok="onok"></ksp-cropper>
		</view>
	</view>
</template>

<script>
	import Map from "@/components/map/map"
	import util from "@/utils/utils.js"
	import Tabbar from "@/components/entTabbar"
	import {myenterprise,saveBasic, getWelfare,getJobCate } from '@/api/enterprise.js'
	import { getProvince, getCity,getDistrict} from '@/api/area.js'
	import { Recharge,RechargeSuccess } from '@/api/user.js'
	import { imgURL,baseURL } from '@/utils/config'
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				free:false,
				showModal:false,
				showCate:false,
				showMapEl:false,
				imgURL:imgURL,
				baseavatar:'',
				tude: {
					latitude:'',
					longitude:'',
				},
				form:{
					ent_id:'',
					logo: '',//企业logo
					ent_name: '',// COMMENT '公司名称
					license_img: '',//'营业执照图片
					phone: '',// '固定电话
					scale: '',//'公司规模
					field: '',//公司领域
					fieldname:'',//领域名称
					welfare: [],//公司福利
					video:'',
					remark:'',
					about: '',//公司简介
					province: '',//省
					city:  '',//市
					district: '',//区县
					address: '',//详细地址
					imgs:'',
					latitude:'',
					longitude:''
				},
				imgs:[],
				WelfareList:[],
				catelist:[],
				multiArray: [],
				multiIndex: [0, 0, 0],
				multiId: [],
				areaaddress: '',
				rechargemoney:0.01
			}
		},
		onLoad(option) {
			
			this.getEnterprise()
			
			this.getJobCate()
			this.getWelfare()
			this.backendProvince()
		},
		methods: {
			//获取企业信息
			getEnterprise() {
				myenterprise({}).then(res=>{
					if(res.code == 200){
						this.form.ent_id = res.data.ent_id
						this.form.logo = res.data.logo//企业logo
						this.form.ent_name = res.data.ent_name// COMMENT '公司名称
						this.form.license_img = res.data.license_img//'营业执照图片
						this.form.phone = res.data.phone// '固定电话
						this.form.scale = res.data.scale//'公司规模
						this.form.field = res.data.field//公司领域
						this.form.fieldname = res.data.fieldname//公司领域
						this.form.welfare = res.data.welfare ? JSON.parse(res.data.welfare) : []//公司福利
					
						this.form.video = res.data.video//公司视频
						this.form.about = res.data.about//公司简介
						this.form.province = res.data.province//省
						this.form.city = res.data.city//市
						this.form.district = res.data.district//区县
						this.form.address = res.data.address//详细地址
						this.form.longitude = res.data.longitude//经度
						this.form.latitude = res.data.latitude//维度
						this.form.remark = res.data.remark
						this.form.hr = res.data.hr
						this.areaaddress = res.data.province_name+'-'+res.data.city_name+'-'+res.data.district_name
						if(res.data.imgs){
							this.form.imgs = res.data.imgs
							this.imgs = JSON.parse(res.data.imgs)
						}
						
					
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			//获取行业分类
			getJobCate() {
				getJobCate({}).then(res=>{
					if(res.code == 200){
						this.catelist.push(res.data)
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			//福利标签
			getWelfare() {
				getWelfare({}).then(res=>{
					if(res.code == 200){
						this.WelfareList = res.data
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			//选择福利标签
			setWelfare(item){
				if(this.form.welfare.indexOf(item.id) == -1){
					this.form.welfare.push(item.id)
				}
				else{
					this.form.welfare.splice(this.form.welfare.indexOf(item.id), 1); 
					//this.form.welfare.remove(item.id);
				}
			},
			
			shoImg(index){
				var imgbox = [];
				for(let i in this.imgs){
					imgbox.push(this.imgURL+this.imgs[i])
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			delimg(index){
				this.imgs.splice(index,1)
			},
			//提交参数
			submit() {
				if (this.form.logo == "") {
					return uni.showToast({
						icon: 'none',
						title: '请上传公司logo'
					});
				}
				if (this.form.ent_name == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写公司名称'
					});
				}	
				if (this.form.license_img == "") {
					return uni.showToast({
						icon: 'none',
						title: '请上传营业执照'
					});
				}
				if (this.form.scale == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写公司规模'
					});
				}
				if (this.form.field == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择行业分类'
					});
				}
				if (this.form.welfare.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择公司福利'
					});
				}
				if (this.form.province == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择区域'
					});
				}
				if (this.form.address == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写详细地址'
					});
				}
				if (this.form.video == "") {
					return uni.showToast({
						icon: 'none',
						title: '请上传视频'
					});
				}
				if (this.form.remark == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写视频简介'
					});
				}
				if (this.form.hr == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写HR负责人'
					});
				}
				if (this.imgs.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传企业相片'
					});
				}
				if (this.imgs.length > 12) {
					return uni.showToast({
						icon: 'none',
						title: '企业相片最多只能上传12张'
					});
				}
				this.form.imgs = JSON.stringify(this.imgs)
				this.form.welfare = JSON.stringify(this.form.welfare)
				saveBasic(this.form).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								uni.redirectTo({
									url: '/pages/enterprise/resume'
								});
							}
						});
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			Recharge(){
				let that = this
				// saveReserve 为业务接口
				Recharge({money:this.rechargemoney}).then(res => {
						// res为调起微信支付所需参数
						if(res.code === 200) {
							// 调起微信支付
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.data.timeStamp, // 时间戳
								nonceStr: res.data.nonceStr, // 随机字符串
								package: res.data.package,
								signType: res.data.signType, // 签名算法
								paySign: res.data.paySign, // 签名
								success: function (result) {
									console.log('支付成功',res);
									RechargeSuccess({money:this.rechargemoney,order_sn:result.data.order_sn}).then(r=>{
										if(r.code == 200){
												uni.showToast({
													title:r.msg,
													duration: 2000,
													icon:'none',
													success() {
														uni.redirectTo({
															url: '/pages/enterprise/resume'
														});
													}
												});
										}
									})
									// 业务逻辑。。。
								},
								fail: function (err) {
									console.log('支付失败',err);
								}
							});		
						}
					}).catch(err => {
						console.log(err);
					})
			},
			
			selectAvatar() {
				this.free = true
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.baseavatar = rst.tempFilePaths[0];
					}
				});
			},
			onok(e) {
				this.free = false
				let  that = this
				that.free = false
				uni.showLoading({
					title: '上传中'
				});
				this.form.avatar = "";
				const token = uni.getStorageSync('token');
				uni.uploadFile({
						url: baseURL + "/user/Upload",//后台接口
						filePath: e.path,// 上传图片 url
						name: 'file',
						header: {
							'token': token
						},
						success: res => {
							uni.hideLoading()
							let result = JSON.parse(res.data)
							console.log("json：",res)
							that.form.logo = result.data
							console.log("avatar：",res)
						},
						fail: e => {
								app.error('上传失败');
						}
				});
			},
			
			
			oncancel() {
				console.log("这里是关闭")
				// url设置为空，隐藏控件
				this.free = false
				this.baseavatar = "";
			},
			
			//新增图片
			upload(type) {
				let _this = this;
				
				if(type== 3 && _this.imgs.length > 12){
					return uni.showToast({
						icon: 'none',
						title: '企业相片最多只能上传12张'
					});
				}
				util.uploadFile("/enterprise/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								if(type== 2){
									_this.form.license_img = res.data
								}
								else{
									_this.imgs.push(res.data)
								}
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			
			// 上传视频
			uploadVideo() {
				let _this = this;
				util.chooseVideo("/user/video").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								_this.form.video = res.data
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			//多图片上传
			chooseImgs() {
				let _this = this;
				util.chooseImgs("/enterprise/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								if(type == 1){
									_this.form.logo = res.data
								}
								else{
									_this.form.license_img = res.data
								}
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			
			// 获取地理位置
			getAuthorizeMap(){
				const that = this
				uni.chooseLocation({
				    success: function (res) {
							that.form.address = res.address//详细地址
							that.form.longitude = res.longitude//经度
							that.form.latitude = res.latitude//维度
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
			},
			
			//用户在地址页面取消选择
			closeMap(res) {
				this.showMapEl = false
			},
			
			//获取省份列表
			backendProvince(){
				getProvince().then(res => {
					let data = res.data
					let arr = []
					let id = []
					this.multiArray[1] = []
					this.multiId[1] = ''
					this.multiIndex[1] = 0
					
					this.multiArray[2] = []
					this.multiId[2] = ''
					this.multiIndex[2] = 0
					data.map(item => {
						arr.push(item.province_name)
						id.push(item.province_id)
					})
					this.multiArray[0] = arr
					this.multiId[0] = id
					this.backendCity(id)
				})
			},
			
			//获取市级列表
			backendCity(id){
				getCity({id:id}).then(res => {
					let data = res.data
					let arr = []
					let id = []
					
					this.multiArray[2] = []
					this.multiId[2] = ''
					this.multiIndex[2] = 0
					data.map(item => {
						arr.push(item.city_name)
						id.push(item.city_id)
					})
					this.multiArray[1] = arr
					this.multiId[1] = id
					this.multiIndex[1] = 0
					this.backendArea(id)
					this.$forceUpdate()
				})
			},
			
			
			//获取市级列表
			backendArea(id){
				getDistrict({id:id}).then(res => {
					let data = res.data
					let arr = []
					let id = []
					data.map(item => {
						arr.push(item.district_name)
						id.push(item.district_id)
					})
					this.multiArray[2] = arr
					this.multiId[2] = id
					this.multiIndex[2] = 0
					this.$forceUpdate()
				})
			},
			
			// 省市区某一列改变触发事件
			multiColumn(e) {
					let column = e.detail.column
					let index = e.detail.value
					let id = ''
					if(column == 0) {
							this.multiIndex[0] = index
							id = this.multiId[0][index]
							this.backendCity(id)
					}
					if(column == 1) {
							this.multiIndex[1] = index
							id = this.multiId[1][index]
							this.backendArea(id)
					}
					if(column == 2) {
							this.multiIndex[2] = index
					}
			},
			// 省市区确定事件
			multiChange(e) {
				this.form.province = this.multiId[0][this.multiIndex[0]]
				this.form.city = this.multiId[1][this.multiIndex[1]]
				this.form.district = this.multiId[2][this.multiIndex[2]]
				this.areaaddress = this.multiArray[0][this.multiIndex[0]] + '-' + this.multiArray[1][this.multiIndex[1]] + '-' + this.multiArray[2][this.multiIndex[2]]
			},
			
			//选择领域
			PickerChange(e){
				this.form.fieldname = e.value[0].job_cate_name
				this.form.field = e.value[0].job_cate_id
				this.showCate = false
			},
			//行业分类弹窗
			showPicker() {
				this.showCate = true
			},
			//点击按钮关闭行业分类弹窗
			close() {
				this.showCate = false
			},
			//点击遮罩层关闭行业分类弹窗
			cancel() {
				this.showCate = false
			}
		},
	}
</script>

<style lang="scss">
	.main{
		margin: 50rpx;
		.upload{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 190rpx; 
			height:190rpx;
			margin-right: 20rpx;
			border: 1px solid #ccc; 
			border-radius: 10rpx;  
		}
		.OrderBtns {
			padding: 10rpx;
			display: flex;
			align-items: center;
			justify-content: start;
			flex-wrap: wrap;
			.btn {
				border: 1px solid #2090FF;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #2090FF;
				margin: 15rpx 8rpx;
				padding: 4rpx 16rpx
			}
		
			.btnActive {
				background: #2090FF;
				color: #fff;
			}
		}
	}
</style>
